<template>
  <div>
    <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="60%"
    :before-close="handleClose"
  >
    <div class="contents">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
  
      <el-form-item label="名称" class="inputs">
         <el-input v-model="formInline.name" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item label="版本" class="inputs">
         <el-input v-model="formInline.version" placeholder="请输版本" clearable />
      </el-form-item>
      <el-form-item label="成本" class="inputs">
         <el-input v-model="formInline.cost" placeholder="请输入成本" clearable />
      </el-form-item>
  
      <el-form-item label="生效日期" class="inputs">
        <el-date-picker
        v-model="formInline.effectiveDate"
        type="date"
        placeholder="生效日期"
       @change="getsheng"
      />
      </el-form-item>
      <el-form-item label="失效日期" class="inputs">
        <el-date-picker
        v-model="formInline.expiryDate"
        type="date"
        placeholder="失效日期"
        @change="getshi"
      />
      </el-form-item>
      <el-form-item label="失效日期" class="inputs">
         <el-input v-model="formInline.cost" placeholder="请输入成本" clearable />
      </el-form-item>
      <el-form-item label="开启状态" class="inputs">
        <el-radio-group v-model="formInline.isProduct" class="ml-4">
        <el-radio label="0" >停用</el-radio>
        <el-radio label="1">启用</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="物品状态" class="inputs">
        <el-radio-group v-model="formInline.isProduct" class="ml-4">
        <el-radio label="0" >物品</el-radio>
        <el-radio label="1">半成品</el-radio>
      </el-radio-group>
      </el-form-item>
  </el-form>
    </div>

     <div class="adds">
      <el-button type="primary" @click="openAdd">
          新增
        </el-button>
     </div>

    <div class="tables">
      <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="materialId" label="物料" align="center" v-slot="scope">
        <el-select v-model="scope.row.materialId" class="m-2" placeholder="Select" size="large">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.brand"
            :value="item.id"
          />
        </el-select>
      </el-table-column>
      <el-table-column prop="quantity" label="物料个数" align="center" v-slot="scope">
        <el-input v-model="scope.row.quantity" placeholder="请输入物料个数" clearable />
      </el-table-column>
      <el-table-column prop="address" label="状态"  align="center" v-slot="scope">
          <el-radio-group v-model="scope.row.status" class="ml-4">
            <el-radio label="0" >开启</el-radio>
            <el-radio label="1">关闭</el-radio>
        </el-radio-group>
        </el-table-column>
    </el-table>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAdd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {bomApi} from '@/api/erp/BOM/index'
import { ref, watch, reactive,nextTick, onMounted ,onBeforeUnmount, computed} from "vue";
const dialogVisible = ref(true);
const emit = defineEmits(['update:modelValue', 'confirm'])
const options=ref([

])
const tableData =ref( [
  
])
const listDate=ref([
{
			"id": 0,
			"materialId": 0,
			"quantity": "",
			"status": 0
		}
])
const initialState = () => ({
  productId: "",
  name: "",
  version:"", //版本
  effectiveDate:"", //生效日期
  expiryDate:"", //失效日期
  status:"",// 状态
  isProduct:"", //是否办成品
  cost:"", //成本
  items:[]
})
const formInline = reactive(initialState());
const id=ref("")
/** 初始化 **/
onMounted(async () => {
  getwuliao()
})
//获取物流列表
// function getwuliao(){
//   bomApi.getStockCheckPage2().then((res)=>{
//     console.log('物料信息',res)
//   })
// }
function getwuliao(){

  bomApi.getStockCheckPage2().then((res)=>{
    console.log('列表的数据',res)
    options.value=res.list
  })
}
//生效
function getsheng(e){
 
  const date = new Date(e);
    
    // 获取年月日
    const year = date.getFullYear();
    // 月份从0开始，所以需要加1
    const month = date.getMonth() + 1;
    const day = date.getDate();
    
    // 格式化为两位数，如果是一位数前面补0
    const padZero = num => num.toString().padStart(2, '0');
    
    // 返回不同格式
    
    formInline.effectiveDate= `${year}-${padZero(month)}-${padZero(day)}`,
       
  console.log('生效，',formInline.effectiveDate)

}
//失效
function getshi(e){
 const date2 = new Date(e);
   // 获取年月日
   const year2 = date2.getFullYear();
   // 月份从0开始，所以需要加1
   const month2 = date2.getMonth() + 1;
   const day2 = date2.getDate();
   
   // 格式化为两位数，如果是一位数前面补0
   const padZero = num => num.toString().padStart(2, '0');
   
   // 返回不同格式
   
   formInline.expiryDate= `${year2}-${padZero(month2)}-${padZero(day2)}`
}

//新增表格2
function openAdd(){
  
}

//新增
function btnAdd() {
  if(id.value){
    supplierApi.update(formInline).then((res)=>{
      if (res) {
     dialogVisible.value = false
     ElMessage({
       message: '操作成功',
       type: 'success'
     }) 
     // 触发确认事件（可选，用于父组件刷新）
     emit('confirm')
     // 关闭弹窗
    
   }
    })
  }else{
   
   
    supplierApi.create(formInline).then((res) => {
   
   if (res) {
     dialogVisible.value = false
     ElMessage({
       message: '操作成功',
       type: 'success'
     })
     // 触发确认事件（可选，用于父组件刷新）
     emit('confirm')
     // 关闭弹窗
    
   }
 })
  }
  
}
// 关闭前处理（如点击右上角X）
const handleClose = (done) => {
  done() // 调用done关闭对话框
}

// 接收父组件参数
const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false,
		},
    ids:{
      type:String,
      default:''
    }

	

	});
  //获取id
  watch(() => props.ids, (newVal) => {
  id.value = newVal;
  if (newVal) {
    console.log('获取都这个ids',id.value)
    getSpuDetailList(newVal)
  }
});

  watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal;
  if (newVal) {
    resetForm();
  }
});
//获取详情
function getSpuDetailList(){
  supplierApi.details(id.value).then((res)=>{
    console.log('获取的详情',res)
    res.status=res.status.toString()
    Object.assign(formInline, res);

  })
}
//重置表单
const resetForm = () => {
  Object.assign(formInline, initialState());
  // 额外处理: 确保状态默认选中"已开启"
  formInline.status = "0";
}
//  在关闭时也重置表单
const closeDialog = () => {
  dialogVisible.value = false;
  resetForm(); // 关闭时重置
  emit('update:modelValue', false);
}


  watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})


</script>
<style scoped>
.tables{

}

.m-2{
  position: relative;
  top: -9px;
}

.inputs{
  width: 260px;
}

.adds{
  display: flex;
    justify-content: end;
    padding-bottom: 21px;
}

.contents{

}
</style>